﻿<div [@routerTransition]>
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>{{l("Settings")}}</span> <small>{{l("SettingsHeaderInfo")}}</small>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <button class="btn btn-primary blue" (click)="saveAll()"><i class="fa fa-floppy-o"></i> {{l("SaveAll")}}</button>
        </div>
    </div>
    <div class="portlet light margin-bottom-0">
        <div class="portlet-body">
            <tabset class="tab-container tabbable-line" *ngIf="hostSettings">
                <tab heading="{{l('General')}}" *ngIf="showTimezoneSelection">
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <label>{{l("Timezone")}}</label>
                        <timezone-combo [(selectedTimeZone)]="hostSettings.general.timezone" defaultTimezoneScope="{{defaultTimezoneScope}}"></timezone-combo>
                    </div>
                </tab>
                <tab heading="{{l('TenantManagement')}}" *ngIf="hostSettings.tenantManagement">
                    <div>
                        <h4>{{l("FormBasedRegistration")}}</h4>
                        <div class="md-checkbox-list">
                            <div class="md-checkbox">
                                <input id="Setting_AllowSelfRegistration" class="md-check" type="checkbox" name="AllowSelfRegistration" [(ngModel)]="hostSettings.tenantManagement.allowSelfRegistration">
                                <label for="Setting_AllowSelfRegistration">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("AllowTenantsToRegisterThemselves")}}
                                </label>
                                <span class="help-block">{{l("AllowTenantsToRegisterThemselves_Hint")}}</span>
                            </div>
                            <div class="md-checkbox" [hidden]="!hostSettings.tenantManagement.allowSelfRegistration">
                                <input id="Setting_IsNewRegisteredTenantActiveByDefault" class="md-check" type="checkbox" name="IsNewRegisteredTenantActiveByDefault"
                                       [(ngModel)]="hostSettings.tenantManagement.isNewRegisteredTenantActiveByDefault">
                                <label for="Setting_IsNewRegisteredTenantActiveByDefault">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("NewRegisteredTenantsIsActiveByDefault")}}
                                </label>
                                <span class="help-block">{{l("NewRegisteredTenantsIsActiveByDefault_Hint")}}</span>
                            </div>
                            <div class="md-checkbox" [hidden]="!hostSettings.tenantManagement.allowSelfRegistration">
                                <input id="Setting_UseCaptchaOnRegistration" class="md-check" type="checkbox" name="UseCaptchaOnRegistration" [(ngModel)]="hostSettings.tenantManagement.useCaptchaOnRegistration">
                                <label for="Setting_UseCaptchaOnRegistration">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("UseCaptchaOnRegistration")}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                            <select class="form-control edited" [(ngModel)]="hostSettings.tenantManagement.defaultEditionId">
                                <option value="">{{emptyText}}</option>
                                <option *ngFor="let edition of editions" [value]="edition.value">{{edition.displayText}}</option>
                            </select>
                            <label for="TenantEditionSelectionCombobox">{{l("Edition")}}</label>
                        </div>
                    </div>
                </tab>
                <tab heading="{{l('UserManagement')}}" *ngIf="hostSettings.userManagement">
                    <div class="md-checkbox-list">
                        <div class="md-checkbox">
                            <input id="Settings_IsEmailConfirmationRequiredForLogin" class="md-check" type="checkbox" name="IsEmailConfirmationRequiredForLogin"
                                   [(ngModel)]="hostSettings.userManagement.isEmailConfirmationRequiredForLogin">
                            <label for="Settings_IsEmailConfirmationRequiredForLogin">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                {{l("EmailConfirmationRequiredForLogin")}}
                            </label>
                        </div>
                        <div class="md-checkbox">
                            <input id="Settings_SmsVerificationEnabled" class="md-check" type="checkbox" name="SmsVerificationEnabled"
                                   [(ngModel)]="hostSettings.userManagement.smsVerificationEnabled">
                            <label for="Settings_SmsVerificationEnabled">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                {{l("SmsVerificationEnabled")}}
                            </label>
                        </div>
                    </div>
                </tab>
                <tab heading="{{l('Security')}}" *ngIf="hostSettings.security">
                    <div>
                        <h4>{{l("PasswordComplexity")}}</h4>
                        <div class="md-checkbox-list">
                            <div class="md-checkbox">
                                <input id="Setting_PasswordComplexity_UseDefaultSettings" class="md-check" type="checkbox" name="Setting_PasswordComplexity_UseDefaultSettings"
                                       [(ngModel)]="hostSettings.security.useDefaultPasswordComplexitySettings">
                                <label for="Setting_PasswordComplexity_UseDefaultSettings">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("UseDefaultSettings")}}
                                </label>
                            </div>
                        </div>
                        <div class="md-checkbox-list">
                            <div class="md-checkbox">
                                <input id="Setting_PasswordComplexity_RequireDigit" class="md-check" type="checkbox" name="Setting_PasswordComplexity_RequireDigit"
                                       [(ngModel)]="hostSettings.security.passwordComplexity.requireDigit" *ngIf="!hostSettings.security.useDefaultPasswordComplexitySettings">
                                <input id="Setting_PasswordComplexity_RequireDigit" class="md-check" type="checkbox" name="Setting_PasswordComplexity_RequireDigit"
                                       [(ngModel)]="hostSettings.security.defaultPasswordComplexity.requireDigit" *ngIf="hostSettings.security.useDefaultPasswordComplexitySettings"
                                       disabled>
                                <label for="Setting_PasswordComplexity_RequireDigit">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("PasswordComplexity_RequireDigit")}}
                                </label>
                            </div>
                            <div class="md-checkbox">
                                <input id="Setting_PasswordComplexity_RequireLowercase" class="md-check" type="checkbox" name="Setting_PasswordComplexity_RequireLowercase"
                                       [(ngModel)]="hostSettings.security.passwordComplexity.requireLowercase" *ngIf="!hostSettings.security.useDefaultPasswordComplexitySettings">
                                <input id="Setting_PasswordComplexity_RequireLowercase" class="md-check" type="checkbox" name="Setting_PasswordComplexity_RequireLowercase"
                                       [(ngModel)]="hostSettings.security.defaultPasswordComplexity.requireLowercase" *ngIf="hostSettings.security.useDefaultPasswordComplexitySettings"
                                       disabled>
                                <label for="Setting_PasswordComplexity_RequireLowercase">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("PasswordComplexity_RequireLowercase")}}
                                </label>
                            </div>
                            <div class="md-checkbox">
                                <input id="Setting_PasswordComplexity_RequireNonAlphanumeric" class="md-check" type="checkbox" name="Setting_PasswordComplexity_RequireNonAlphanumeric"
                                       [(ngModel)]="hostSettings.security.passwordComplexity.requireNonAlphanumeric" *ngIf="!hostSettings.security.useDefaultPasswordComplexitySettings">
                                <input id="Setting_PasswordComplexity_RequireNonAlphanumeric" class="md-check" type="checkbox" name="Setting_PasswordComplexity_RequireNonAlphanumeric"
                                       [(ngModel)]="hostSettings.security.defaultPasswordComplexity.requireNonAlphanumeric" *ngIf="hostSettings.security.useDefaultPasswordComplexitySettings"
                                       disabled>
                                <label for="Setting_PasswordComplexity_RequireNonAlphanumeric">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("PasswordComplexity_RequireNonAlphanumeric")}}
                                </label>
                            </div>
                            <div class="md-checkbox">
                                <input id="Setting_PasswordComplexity_RequireUppercase" class="md-check" type="checkbox" name="Setting_PasswordComplexity_RequireUppercase"
                                       [(ngModel)]="hostSettings.security.passwordComplexity.requireUppercase" *ngIf="!hostSettings.security.useDefaultPasswordComplexitySettings">
                                <input id="Setting_PasswordComplexity_RequireUppercase" class="md-check" type="checkbox" name="Setting_PasswordComplexity_RequireUppercase"
                                       [(ngModel)]="hostSettings.security.defaultPasswordComplexity.requireUppercase" *ngIf="hostSettings.security.useDefaultPasswordComplexitySettings"
                                       disabled>
                                <label for="Setting_PasswordComplexity_RequireUppercase">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("PasswordComplexity_RequireUppercase")}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                            <input type="number" name="RequiredLength" class="form-control" [ngClass]="{'edited':hostSettings.security.passwordComplexity.requiredLength}"
                                   [(ngModel)]="hostSettings.security.passwordComplexity.requiredLength" *ngIf="!hostSettings.security.useDefaultPasswordComplexitySettings">
                            <input type="number" name="RequiredLength" class="form-control" [ngClass]="{'edited':hostSettings.security.defaultPasswordComplexity.requiredLength}"
                                   [(ngModel)]="hostSettings.security.defaultPasswordComplexity.requiredLength" *ngIf="hostSettings.security.useDefaultPasswordComplexitySettings"
                                   disabled>
                            <label>{{l("PasswordComplexity_RequiredLength")}}</label>
                        </div>
                    </div>
                    <div>
                        <h4>{{l("UserLockOut")}}</h4>
                        <div class="md-checkbox-list">
                            <div class="md-checkbox">
                                <input id="Setting_UserLockOut_IsEnabled" class="md-check" type="checkbox" name="Setting_UserLockOut_IsEnabled" [(ngModel)]="hostSettings.security.userLockOut.isEnabled">
                                <label for="Setting_UserLockOut_IsEnabled">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("EnableUserAccountLockingOnFailedLoginAttemts")}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf="hostSettings.security.userLockOut.isEnabled">
                            <input type="number" name="MaxFailedAccessAttemptsBeforeLockout" class="form-control" [ngClass]="{'edited':hostSettings.security.userLockOut.maxFailedAccessAttemptsBeforeLockout}"
                                   [(ngModel)]="hostSettings.security.userLockOut.maxFailedAccessAttemptsBeforeLockout">
                            <label>{{l("MaxFailedAccessAttemptsBeforeLockout")}}</label>
                        </div>
                        <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf="hostSettings.security.userLockOut.isEnabled">
                            <input type="number" name="DefaultAccountLockoutSeconds" class="form-control" [ngClass]="{'edited':hostSettings.security.userLockOut.defaultAccountLockoutSeconds}"
                                   [(ngModel)]="hostSettings.security.userLockOut.defaultAccountLockoutSeconds">
                            <label>{{l("DefaultAccountLockoutDurationAsSeconds")}}</label>
                        </div>
                    </div>
                    <div>
                        <h4>{{l("TwoFactorLogin")}}</h4>
                        <div class="md-checkbox-list">
                            <div class="md-checkbox">
                                <input id="Setting_TwoFactorLogin_IsEnabled" class="md-check" type="checkbox" name="Setting_TwoFactorLogin_IsEnabled" [(ngModel)]="hostSettings.security.twoFactorLogin.isEnabled">
                                <label for="Setting_TwoFactorLogin_IsEnabled">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("EnableTwoFactorLogin")}}
                                </label>
                            </div>
                            <div class="md-checkbox" *ngIf="hostSettings.security.twoFactorLogin.isEnabled">
                                <input id="Setting_TwoFactorLogin_IsEmailProviderEnabled" class="md-check" type="checkbox" name="Setting_TwoFactorLogin_IsEmailProviderEnabled"
                                       [(ngModel)]="hostSettings.security.twoFactorLogin.isEmailProviderEnabled">
                                <label for="Setting_TwoFactorLogin_IsEmailProviderEnabled">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("IsEmailVerificationEnabled")}}
                                </label>
                            </div>
                            <div class="md-checkbox" *ngIf="hostSettings.security.twoFactorLogin.isEnabled">
                                <input id="Setting_TwoFactorLogin_IsSmsProviderEnabled" class="md-check" type="checkbox" name="Setting_TwoFactorLogin_IsSmsProviderEnabled"
                                       [(ngModel)]="hostSettings.security.twoFactorLogin.isSmsProviderEnabled">
                                <label for="Setting_TwoFactorLogin_IsSmsProviderEnabled">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("IsSmsVerificationEnabled")}}
                                </label>
                            </div>
                            <div class="md-checkbox" *ngIf="hostSettings.security.twoFactorLogin.isEnabled">
                                <input id="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled" class="md-check" type="checkbox" name="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled"
                                       [(ngModel)]="hostSettings.security.twoFactorLogin.isGoogleAuthenticatorEnabled">
                                <label for="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("IsGoogleAuthenticatorEnabled")}}
                                </label>
                            </div>
                            <div class="md-checkbox" *ngIf="hostSettings.security.twoFactorLogin.isEnabled">
                                <input id="Setting_TwoFactorLogin_IsRememberBrowserEnabled" class="md-check" type="checkbox" name="Setting_TwoFactorLogin_IsRememberBrowserEnabled"
                                       [(ngModel)]="hostSettings.security.twoFactorLogin.isRememberBrowserEnabled">
                                <label for="Setting_TwoFactorLogin_IsRememberBrowserEnabled">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>
                                    {{l("AllowToRememberBrowserForTwoFactorLogin")}}
                                </label>
                            </div>
                        </div>
                    </div>
                </tab>
                <tab heading="{{l('EmailSmtp')}}" *ngIf="hostSettings.email">
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input type="email" name="DefaultFromAddress" class="form-control" [ngClass]="{'edited':hostSettings.email.defaultFromAddress}"
                               [(ngModel)]="hostSettings.email.defaultFromAddress" maxlength="@MVlog.Authorization.Users.User.MaxEmailAddressLength">
                        <label>{{l("DefaultFromAddress")}}</label>
                    </div>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input type="text" name="DefaultFromDisplayName" class="form-control" [ngClass]="{'edited':hostSettings.email.defaultFromDisplayName}"
                               [(ngModel)]="hostSettings.email.defaultFromDisplayName" maxlength="128">
                        <label>{{l("DefaultFromDisplayName")}}</label>
                    </div>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input type="text" name="SmtpHost" class="form-control input-ltr" [ngClass]="{'edited':hostSettings.email.smtpHost}" [(ngModel)]="hostSettings.email.smtpHost"
                               maxlength="64">
                        <label>{{l("SmtpHost")}}</label>
                    </div>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input type="number" name="SmtpPort" class="form-control edited" [ngClass]="{'edited':hostSettings.email.smtpPort}" [(ngModel)]="hostSettings.email.smtpPort"
                               maxlength="5">
                        <label>{{l("SmtpPort")}}</label>
                    </div>
                    <div class="md-checkbox-list">
                        <div class="md-checkbox">
                            <input id="Settings_SmtpEnableSsl" class="md-check" type="checkbox" name="SmtpEnableSsl" [(ngModel)]="hostSettings.email.smtpEnableSsl">
                            <label for="Settings_SmtpEnableSsl">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                {{l("UseSsl")}}
                            </label>
                        </div>
                        <div class="md-checkbox">
                            <input id="Settings_SmtpUseDefaultCredentials" class="md-check" type="checkbox" name="SmtpUseDefaultCredentials" [(ngModel)]="hostSettings.email.smtpUseDefaultCredentials">
                            <label for="Settings_SmtpUseDefaultCredentials">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                {{l("UseDefaultCredentials")}}
                            </label>
                        </div>
                    </div>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint" [hidden]="hostSettings.email.smtpUseDefaultCredentials">
                        <input type="text" name="SmtpDomainName" class="form-control input-ltr" [ngClass]="{'edited':hostSettings.email.smtpDomain}"
                               [(ngModel)]="hostSettings.email.smtpDomain" maxlength="128">
                        <label>{{l("DomainName")}}</label>
                    </div>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint" [hidden]="hostSettings.email.smtpUseDefaultCredentials">
                        <input type="text" name="SmtpUserName" class="form-control input-ltr" [ngClass]="{'edited':hostSettings.email.smtpUserName}"
                               [(ngModel)]="hostSettings.email.smtpUserName" maxlength="128">
                        <label>{{l("UserName")}}</label>
                    </div>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint" [hidden]="hostSettings.email.smtpUseDefaultCredentials">
                        <input type="password" name="SmtpPassword" class="form-control" [ngClass]="{'edited':hostSettings.email.smtpPassword}" [(ngModel)]="hostSettings.email.smtpPassword"
                               maxlength="128">
                        <label>{{l("Password")}}</label>
                    </div>
                    <hr />
                    <h4>{{l("TestEmailSettingsHeader")}}</h4>
                    <div class="row">
                        <div class="form-group form-md-line-input has-info form-md-floating-label col-md-4">
                            <input type="text" class="form-control input-sm" [(ngModel)]="testEmailAddress">
                        </div>
                        <div class="form-group form-md-line-input col-md-2">
                            <button class="btn green-haze" type="button" (click)="sendTestEmail()">{{l("SendTestEmail")}}</button>
                        </div>
                    </div>
                </tab>
                <tab heading="{{l('Invoice')}}">
                    <h4>{{l("InvoiceInformation")}}</h4>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input type="text" name="legalName" class="form-control" [ngClass]="{'edited':hostSettings.billing.legalName}" [(ngModel)]="hostSettings.billing.legalName" maxlength="64">
                        <label>{{l("LegalName")}}</label>
                    </div>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <textarea rows="5" name="address" class="form-control" [ngClass]="{'edited':hostSettings.billing.address}" [(ngModel)]="hostSettings.billing.address" maxlength="256"></textarea>
                        <label>{{l("Address")}}</label>
                    </div>
                </tab>
            </tabset>
        </div>
    </div>
</div>
